<template>
    <div class="details">
        <!-- 内容区域 -->
        <div class="details-scroll">
            <div class="content-container">
                <!--轮播-->
                <div class="carousel-container">
                  <carousel-3d v-if="imgArr" class="carousel" :dir="'ltr'" :autoplay="true" :autoplayHoverPause="true" :autoplayTimeout="5000" 
                  :inverseScaling="200" :border='0' :animationSpeed="700" :display='5'>
                    <slide class="slide" v-for="(item, i) in imgArr" :index="i" :key="i">
                        <my-image class="my-img" :imgUrl="soursePath+item.iconurl"></my-image>
                    </slide>
                  </carousel-3d>
                </div>
                <!--banner下面的条-->
                <div class='strip-section'>
                </div>
                <!--商品价格信息-->
                <div class='intro-section'>
                  <div class='top'>
                    <div class='top-wapper'>
                      <div class='name'>{{mealName}}</div>
                      <div class='recipe'>{{slogan}}</div>
                    </div>
                  </div>
                  <div v-if="oldPrice!=0" class='down'>
                    <div class='price-group'>
                      <span class='new-price'>{{price}}</span><span class='rmb'>RMB</span>
                      <span v-if="parseInt(discount)!=1" class='old-price'>{{oldPrice}}元</span>
                    </div>
                    <!-- <div class='tip'>支持线上退款</div> -->
                  </div>
                  <div v-else class='down'>
                    <div class='price-group'>
                      <span class='new-price'>门店价</span>
                    </div>
                  </div>
                </div>
                <!--购买须知-->
                <div class='rule-section'>
                  <div class='rule-section-wapper'>
                    <div class='title'>购买须知</div>
                    <div class='flow-list'>
                      <div class='flow-item'>
                        <div class='num-box'>
                          <span class='num'>1</span>
                        </div>
                        <span class='word'>线上支付</span>
                      </div>
                      <div class='flow-item'>
                        <div class='num-box'>
                          <span class='num'>2</span>
                        </div>
                        <span class='word'>查看购买记录</span>
                      </div>
                      <div class='flow-item'>
                        <div class='num-box'>
                          <span class='num'>3</span>
                        </div>
                        <span class='word'>到店扫码消费</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="chain-tab">
                  <div class="chain-tab-ul">
                    <div class="chain-tab-li" :class="[{'active':curTab==0}]" @click="changeTab(0)">
                        <div class="chain-tab-li-hot">
                          <span class="chain-name">商品详情</span>
                        </div>
                    </div>
                    <div class="chain-tab-li" :class="[{'active':curTab==1}]" @click="changeTab(1)">
                        <div class="chain-tab-li-hot">
                          <span class="chain-name">服务项目</span>
                        </div>
                    </div>
                  </div>
                </div>
                <!--详情-->
                <template v-if="curTab==0">
                  <div class="meal-content" v-html="htmlmsg"></div>
                </template>
                <!--服务项目-->
                <template v-else-if="curTab==1">
                    <div class="service-list" >
                      <template v-for="(item,index) in serviceArr">
                          <div class="service-item" :class="[{'notLast':index!=serviceArr.length-1,'use-time':item.type.toString()=='1'}]" :key="item.id">
                            <div class="left">{{item.att}}</div>
                            <div class="right"> 
                              <span class="num">{{item.attvalue}}</span>
                            </div>
                          </div>
                      </template>
                    </div>
                </template>
            </div>
        </div>
        <!-- 底部按钮 -->
        <div class="bottom-btn-container" @click="buyHandle">
          <span>立即购买</span>
          <!-- <mt-button size="large" class="bottom-btn buy-btn" type="default" @click.native="buyHandle">立即购买</mt-button> -->
        </div>
        
        <!-- 弹出框区域 -->
        <mt-popup class="select-popup" position="bottom" popup-transition="popup-slide" :modal=true v-model="showPopup">
            <div ref="betterscroll" class="popup-content">
              <div class="select-word-container">
                <p class="select-word">请选择需要购买的数量</p>
              </div>
              <div class="select-content">
                <div class="left">
                  <mt-picker class="my-picker" :slots="slots" @change="onValuesChange" :itemHeight="42" :visibleItemCount="3"></mt-picker>
                  <p class="num-word">件</p>
                </div>
                <div class="total-div">
                  <span class="total-word">共计：</span><span class="symbol">&yen;</span><span class="total-price">{{totalPrice}}</span>
                </div>
              </div>
              <mt-button size="large" class="exchange-btn" type="default" @click.native="popupBuyHandle">购买</mt-button>
            </div>
        </mt-popup>
    </div>
</template>

<script>
import Vue from "vue";
import $ from "jquery";
import { Carousel3d, Slide } from "vue-carousel-3d";
import { Toast, Popup, Button, Picker } from "mint-ui";
import BScroll from "better-scroll";
import "mint-ui/lib/toast/style.css";
import "mint-ui/lib/button/style.css";
import "mint-ui/lib/popup/style.css";
import "mint-ui/lib/picker/style.css";
import { mapState } from "vuex";
import sharejs from "../../common/js/sharejs.js";
// import wxpay from "../../common/js/wxpay";
import myImage from "../lazyloadImg/lazyImage.vue";
import { savaToLocal, loadFromlLocal } from "../../common/js/storage.js"; // 公共方法：本地缓存

Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);
Vue.component(Toast.name, Toast);
Vue.component(Picker.name, Picker);

export default {
  name: "v-details",
  data() {
    return {
      htmlmsg: "",
      imgArr: null,
      mealCover: "",
      price: 0,
      oldPrice: 0,
      discount: 0,
      detailsid: "",
      slogan: "",
      mealName: "",
      showPopup: false,
      iconurl: "",
      buyNum: 1,
      buyType: "1", //1代表一次只能购买一个、2代表一次可以购买多个
      curTab: 0, //商品详情0 服务项目1
      serviceArr: null,
      slots: [
        {
          flex: "0 0 30px",
          values: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
          className: "slot1",
          defaultIndex: 0
        },
        {
          flex: "0 0 30px",
          values: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
          className: "slot2",
          textAlign: "left",
          defaultIndex: 1
        }
      ]
    };
  },
  components: { myImage, Carousel3d, Slide },
  computed: {
    ...mapState([
      "path",
      "role",
      "userid",
      "soursePath",
      "serviceTel",
      "phoneno",
      "domainUrl",
      "storeid",
      "sistem"
    ]),
    totalPrice() {
      return (this.buyNum * this.price).toFixed(2);
    }
  },
  beforeRouteLeave(to, from, next) {
    if(this.sistem=='ios'){
      sharejs.defultShareMsg();
      sharejs.getWxData();
    }
    next();
  },
  created() {
    // document.body.scrollTop = 0;
    this.detailsid = this.$route.params.detailsid;
    this.getDetailsData();
  },
  methods: {
    onValuesChange(picker, values) {
      var tempNum = parseInt(values[0] + values[1]);
      if (tempNum == 0) {
        picker.setSlotValue(1, 0);
        let value1Dom = $(".select-content .my-picker .slot2 .picker-item").eq(
          1
        );
        let clearId = setTimeout(() => {
          clearTimeout(clearId);
          if (!value1Dom.hasClass("picker-selected")) {
            value1Dom.addClass("picker-selected");
          }
        }, 100);
        this.buyNum = 1;
        return;
      }
      this.buyNum = tempNum;
    },
    buyHandle(event) {
      if (this.oldPrice == 0) {
        Toast({
          message: "该商品仅支持门店购买",
          duration: 1500
        });
        return;
      }
      //角色是普通的用户
      if (!this.phoneno || this.phoneno == "") {
        //用户未绑定手机号码
        this.$router.push({ path: "/bindPhone" });
        return;
      }
      if (this.buyType == "2")
        this.showNumPopup(); //如果可一次性购买多个
      else this.jumpToPayPage();
    },
    popupBuyHandle(event) {
      if (event._constructed) return;
      this.jumpToPayPage();
    },
    jumpToPayPage() {
      let payInfoObj = {
        goodId: this.detailsid,
        goodDec: this.slogan,
        price: this.price,
        goodName: this.mealName,
        goodIcon: this.iconurl,
        num: this.buyNum
      };
      savaToLocal("dianwu2", "payInfo", payInfoObj);
      this.$router.push({ path: "/payAffirm/" });
    },
    showNumPopup() {
      this.showPopup = true;
      this.$nextTick(() => {
        if (!this.betterscroll)
          this.betterscroll = new BScroll(this.$refs.betterscroll, {
            click: true
          });
      });
    },
    getDetailsData() {
      this.$http
        .post(this.path + "store/Goods/goodsmsg", {
          goodsid: this.detailsid
        })
        .then(response => {
          let serverData = response.body.result;
          this.imgArr = serverData.imgarr;
          let ginfo = serverData.ginfo;
          this.oldPrice = ginfo.price;
          this.discount = ginfo.discount;
          this.price = (ginfo.price * ginfo.discount).toFixed(2);
          this.slogan = ginfo.message;
          this.mealName = ginfo.gname;
          this.serviceArr = serverData.att;
          this.iconurl = this.soursePath + ginfo.icon;
          // this.buyType = ginfo.buyType.toString();
          this.buyType = "2";
          //HTMLDecode();
          this.htmlmsg = this.unescapeHTML(ginfo.htmlmsg);
          this.updataShare();
        })
        .catch(response => {
          console.log(response);
        });
    },
    changeTab(tabIndex) {
      if (this.curTab == tabIndex) return;
      this.curTab = tabIndex;
    },
    callShops() {
      window.location.href = "tel:" + this.serviceTel;
    },
    updataShare() {
      let tourl = this.domainUrl + "details/" + this.detailsid;
      var shareUrl =
        this.domainUrl +
        "login.html?type=into&storeid=" +
        this.storeid +
        "&tourl=" +
        encodeURIComponent(tourl);
      var shareimg = this.iconurl;
      sharejs.updateShareMsg(shareUrl, shareimg, this.slogan, this.mealName);
    },
    unescapeHTML: function(a) {
      a = "" + a;
      return a
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/css/mixin.styl';
@import './details.css';

.details {
  font-family: 'Microsoft YaHei';
  width: 100%;

  .details-scroll {
    width: 100%;
    padding-bottom: 0.4rem;

    .content-container {
      width: 100%;

      .carousel-container {
        width: 100%;
        padding: 0.1rem 0 0.08rem 0;
        height: 1.43rem;

        .carousel {
          // width: 3.2rem;
          height: 1.43rem !important;
          margin: 0 auto;

          .slide {
            background-color: transparent;
            padding-bottom: 0.02rem;

            .img-container {
              margin: 0 auto;
              box-shadow: 0 1px 2px rgba(247, 245, 243, 1);
            }

            .my-img {
              background-color: #f1f1f1;
              width: 2.8rem;
              height: 1.4rem;
              border-radius: 0.06rem;
            }
          }
        }
      }
    }

    .chain-tab {
      border-top: 0.08rem #f7f5f3 solid;
      height: 0.36rem;
      width: 100%;

      .chain-tab-ul {
        margin: 0px auto;
        height: 100%;
        width: 80%;
        display: flex;
        align-items: center;
        text-align: center;

        .chain-tab-li {
          overflow: hidden;
          height: 100%;
          flex: 1;

          .chain-tab-li-hot {
            width: 100%;
            height: 100%;
            position: relative;

            .chain-name {
              line-height: 0.36rem;
              color: #999;
              font-size: 0.13rem;
              position: relative;
              top: 0.01rem;
              // letter-spacing: 0.01rem;
            }
          }

          .chain-tab-li-hot::after {
            position: absolute;
            bottom: -3px;
            left: 15%;
            width: 70%;
            height: 2px;
            background: #ff65a8;
            border-radius: 1px;
            content: '';
            -webkit-transition: -webkit-transform 0.2s;
            transition: transform 0.2s;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
          }

          &.active {
            .chain-name {
              top: 0px;
              color: #666;
            }

            .chain-tab-li-hot::after {
              -webkit-transform: translate3d(0, -150%, 0);
              transform: translate3d(0, -150%, 0);
            }
          }
        }
      }
    }

    .meal-content {
      box-sizing: border-box;
      padding: 0.13rem 0.08rem 0.16rem 0.08rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .bottom-btn-container {
    position: fixed;
    box-sizing: border-box;
    max-width: 750px;
    width: 100%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50, 0, 0);
    left: 50%;
    height: 0.4rem;
    padding: 0 0.08rem;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 0 1px rgba(230, 230, 230, 1);

    span {
      // width: 100%;
      font-size: 0.15rem;
      letter-spacing: 0.02rem;
      // height: 0.32rem;
      // box-shadow: none;
      // border-radius: 0.02rem;
      // background-color: #EE799F;
      color: #EE799F;
    }
  }

  .select-popup {
    width: 100%;
    height: 2.11rem;
    border-top: 0.12rem solid #F193B2;
    border-radius: 0.06rem 0.06rem 0px 0px;

    .popup-content {
      position: absolute;
      left: 0.12rem;
      right: 0.12rem;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .select-word-container {
        width: 100%;
        border-bottom: 1px solid #ddd;

        .select-word {
          color: #666;
          font-size: 0.13rem;
          line-height: 0.36rem;
          padding-left: 0.14rem;
          position: relative;
          top: 0.04rem;
        }
      }
    }

    .select-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      margin: 0 0.16rem;

      .left {
        display: flex;
        align-items: center;

        .my-picker {
          flex: 0 0 0.8rem;

          .picker-item {
            font-size: 0.18rem;
            color: #acacac;

            &.picker-selected {
              color: #595656;
            }
          }
        }

        .num-word {
          flex: 0 0 0.5rem;
          line-height: 0.36rem;
          font-size: 0.18rem;
          color: #595656;
        }
      }

      .total-div {
        text-align: center;
        margin-right: 0.1rem;
        color: #EE799F;

        .total-word {
          font-size: 0.15rem;
          letter-spacing: 0.02rem;
        }

        .symbol {
          font-size: 0.13rem;
          margin-right: 0.02rem;
        }

        .total-price {
          display: inline-block;
          font-size: 0.15rem;
        }
      }
    }

    .exchange-btn {
      margin: 0 auto 0.1rem auto;
      width: 88%;
      background-color: #F193B2;
      color: #fff;
      font-size: 0.13rem;
      letter-spacing: 0.05rem;
      height: 0.3rem;
      box-shadow: none;
    }
  }
}
</style>